<template>
	<view class="wanlshop-category-container" :style="{ '--bg': appStyle.home_nav_color }">
		<view class="currentInvoicing">
			<view class="currentHeader">
				<view>
					<text style="font-weight:bold;">当前申请开票订单</text>
				</view>
			</view>
			<view class="currentContent">
				<view>
					<view style="margin-bottom: 10rpx;">订单编号:&nbsp&nbsp{{ TargeOrderNo }}</view>
					<view>订单金额:&nbsp&nbsp{{ TargetPrice }}</view>
				</view>
			</view>
		</view>

		<view class="currentInvoicing">
			<view class="currentHeader">
				<checkbox-group style="display: flex; align-items: center"
					:class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="selectAll($event)">
					<checkbox multiple :class="whole == 2 ? 'checked' : ''" :checked="isActive" value="2" />
					<view class="text-right" style="margin-left: 4px">
						<text style="margin-left: 4px;font-weight:bold;">其他可合并开票订单</text>
					</view>
				</checkbox-group>
			</view>
			<view class="currentContent">
				<checkbox-group class="auth-clause" @change="CheckboxChange">
					<view v-for="(item,index) in orderList" :key="index" style="
            display: flex;
            align-items: flex-start;
            padding-bottom: 6px;
            padding-top: 6px;    
            border-bottom: 1px solid #fafafa;
          ">
						<checkbox :class="checked == 2 ? 'checked' : ''" :checked="item.checked" :value="item.id" />
						<view style="margin-left: 4px">
							<view style="margin-left: 4px; margin-top: 4rpx;margin-bottom: 10rpx;">
								订单编号:&nbsp&nbsp{{ item.order_no }}</view>
							<view style="margin-left: 4px">订单金额:&nbsp&nbsp¥{{ item.pay.price }}</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>

		<button type="primary" @tap="setUp('customForm')" class="FormButton">
			下一步
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				whole: '',
				orderList: [{
						label: '111',
						id: 1,
						checked: false
					},
					{
						label: '222',
						id: 2,
						checked: false
					},
					{
						label: '333',
						id: 3,
						checked: false
					},
					{
						label: '444',
						id: 4,
						checked: false
					},
					{
						label: '555',
						id: 5,
						checked: false
					},
				],
				TargeOrderNo: '',
				TargetPrice: '',
				order_id: '',
				isActive: false,
			};
		},
		onLoad() {
			let res = uni.getStorageSync('order_info');
			console.log(res, 'getStorageSync');
			res = JSON.parse(res)

			this.TargeOrderNo = res.order_no
			this.order_id = res.order_id
			this.TargetPrice = res.price

			this.loadData(res.order_id)
		},
		methods: {
			loadData(order_id) {
				this.$api.post({
					url: '/wanlshop/invoice/mergeableOrders',
					data: {
						order_id,
						page: 1
					},
					success: res => {
						this.orderList = res.data
					}
				});
			},
			areAllTrue(arr) {
				for (let i = 0; i < arr.length; i++) {
					if (!arr[i].checked) {
						return false;
					}
				}
				return true;
			},
			CheckboxChange(e) {
				var items = this.orderList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(String(item.id))) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				console.log(items, 'CheckboxChange')
				this.orderList = items

				let result = this.areAllTrue(items);
				console.log(result); // 输出：true

				if (result) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			},
			// 全选函数
			selectAll(e) {
				let datas = []
				if (e.detail.value.length == 0) {
					datas = this.orderList.map((res) => {
						res.checked = false
						return res
					})
				} else {
					datas = this.orderList.map((res) => {
						res.checked = true
						return res
					})
				}
				this.orderList = datas
			},
			setUp() {
				// console.log(this.options,'options--options')
				// return
				let is_order_list = [],
					order_id_list = []
				var as = this.orderList.filter((item, index) => item.checked)
				order_id_list = as.map((res) => res.id)
				is_order_list = [...order_id_list, ...[this.order_id]]

				uni.setStorage({
					key: "is_order_list",
					data: JSON.stringify(is_order_list),
					success: function() {
						console.log("存储成功")
					}
				})

				uni.navigateTo({
					url: `/pages/invoice/index`
				});
			}
		},
	};
</script>

<style>
	page {
		background-color: #f6efe9;
	}

	/* 隐藏uni-easyinput中的文本框 */
	.uni-easyinput__inner {
		border: none;
		/* 去掉边框 */
		background-color: transparent;
		/* 背景透明 */
		outline: none;
		/* 去掉焦点时的轮廓 */
	}
</style>

<style lang="scss" scoped>
	.cusForm {
		border-radius: 30px;
	}

	.wanlshop-category-container {
		background-color: var(--bg);
		height: calc(100vh - 130rpx);
		overflow: auto;
	}

	.navigator {
		box-sizing: border-box;
		/* #ifdef MP */
		padding-right: 220rpx;
		/* #endif */
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	.cu-bar .action {
		position: relative;
	}

	/* #ifdef MP */
	.cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.currentInvoicing {
		width: 92%;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;

		.currentContent {
			margin-top: 20rpx;
		}

		text {
			line-height: 28rpx;
		}
	}

	.fp-container {
		display: flex;
		justify-items: center;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx auto 0 auto;
		width: 92%;
		padding: 0 15px;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.example {
		margin: 20rpx auto 0 auto;
		width: 92%;
		padding: 0 15px;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.FormButton {
		width: 710rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 756rpx;
		background: $theme !important;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;
		font-size: 28rpx;
	}

	uni-checkbox.checked ::v-deep .uni-checkbox-input {
		border-radius: 50% !important;
	}

	uni-checkbox.checked ::v-deep .uni-checkbox-input-checked {
		background-color: $theme !important;
		border-color: $theme !important;
	}

	wx-checkbox ::v-deep .wx-checkbox-input {
		border-radius: 50% !important;
		height: 26rpx;
		width: 26rpx;
	}

	checkbox::before {
		font-size: 20rpx;
		line-height: 36rpx;
		right: 2rpx;
	}

	wx-checkbox ::v-deep .wx-checkbox-input-checked {
		background-color: $theme !important;
		border-color: $theme !important;
	}

	/* 可以通过自定义类来设置更多样式 */
	::v-deep .uni-forms-item {
		border-bottom: 1px solid #e5e5e5;
		/* 设置边框为1px的灰色 */
		margin-bottom: 0px !important;
	}

	::v-deep .uni-easyinput__content-input {
		text-align: right;
	}
</style>